<template>
	<view>
		<view class="attr_content">
			<view class="attr-list" v-for="(item,index) in specList" :key="index">
				<text>{{item.name}}</text>
				<view class="item-list">
					<text v-for="(childItem, childIndex) in cateGory" v-if="childItem.cateroryType == item.id" :key="childIndex" class="tit"
					 :class="{selected: childItem.selected}" @click="selectSpec(childIndex, childItem.cateroryType, childItem.id)">
						{{childItem.categoryName}}
					</text>
				</view>
			</view>
		</view>

		<view class="text_content">
			<view class="tui-textarea-box">
				<textarea class="tui-textarea" v-model.trim="textarea" @blur="bindTextAreaBlur" name="desc" placeholder="请输入发表的文案~~~"
				 maxlength="500" placeholder-class="tui-phcolor-color" />
			</view>
		</view>
		
		<view class="uploadMaterial">
			<view class="uploadMaterialTop">
				<view>上传素材</view>
				<view class="uploadMaterialcheck" v-for="(item,index) in sharelist" :key="index" :item="item" @click="timedata(item.id)">
					<view class="uploadMaterialquant" :class="item.selected?'uploadMaterialquan':''"></view>
					<text class="shar_time">{{item.name}}</text>
				</view>
			</view>
			
			<view class="uploadMaterialBottom" v-if="hasVideo == 1">
				<tui-upload :value="value" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
			</view>
			
			<view class="uploadMaterialBottom" v-if="hasVideo == 0">
				<image v-show="imagesShow" :src="file" @tap="chooseImage"></image>
				<video v-show="VideoOfImagesShow" :src="src" class="video"></video>
			</view>
			
			<view class="uploadMaterialBottom" v-if="hasVideo == 0">
				<web-view src="https://uniapp.dcloud.io/static/web-view.html" style="position: absolute;top: 740rpx; width: 374rpx; height: 372rpx; overflow-y: hidden; overflow-x: hidden;"></web-view>
			</view>
			
			
		</view>
		
		<view class="loginbtn" @click="ConfirmUpload">
			<button>确认上传</button>
		</view>
	</view>
</template>


<script>
	import OSSUtil from '../../ossUtil.js'
	// import TcVod from '../../static/js/vodsdk.js'
	
	export default {

		data() {
			return {
				select:false,
				sharelist: [
					{
						id: 1,
						name: "图片",
						selected: true,
						
					},
					{
						id: 0,
						name: "视频",
						selected: false,
					}
				],
				specList: [
					{
						id: 1,
						name: '选择类型',
					},
				],
				
				textarea:"",
				userId:"",
				id:"",
				hasVideo:"1",
				file:"../../static/img/me/mission_upload_pictures.png",
				src:"",
				files:{},
				urlUpload:"",
				imageData: [],
				serverUrl: "",
				value:[],
				cateGory:[],
				
				sign:"",
				VideoOfImagesShow:false,
				imagesShow:true,
				
				videoUrl: "",
				progress: 0,
				imgData: {
					visible: false,
					actions: this.imgActions
				},
				
				url:"http://59.110.239.118:8082/app/material/getSignature"
				
			};
		},

		onLoad() {
			let userinfo = uni.getStorageSync("userInfo")
			this.userId = userinfo.id
			this.value = []
			this.serverUrl = this.tui.interfaceUrl() + '/wx/storage/upload'
			
			// 商品分类
			this.tui.request(
				'/app/material/getMaterialCategory',
				'GET', {
					categoryType: 1,
				},
				false,
				false,
				false,
			).then(res => {
				this.cateGory = res.data.list;
				console.log(this.cateGory)
			
			}).catch(err => {
				console.log(err)
			})
			
			
			
			
			
			
			
			
			
		},
		created(){
			this.getSignature();
			
			
		},
		destroyed() {
			
			
		},

		methods: {
			//获取签名
			getSignature:function(){
				this.tui.request('/app/material/getSignature', 'get',{},false, false, false, )
					.then(res => {
						this.sign = res.data.sign
						console.log(this.sign)
						
					}).catch(err => {
						console.log(err)
					})
			},
			
			timedata(id){
				for(let i=0;i<this.sharelist.length;i++){
					if(this.sharelist[i].id==id){
						this.sharelist[i].selected=true
					}else{
						this.sharelist[i].selected=false
					}
				}
				console.log(this.hasVideo)
				this.hasVideo = id
			},
			
			// 选择
			selectSpec(index, pid, id) {
				console.log(index)
				console.log(pid)
				console.log(id)
				let list = this.cateGory;
				list.forEach(item => {
					if (item.cateroryType === pid) {
						this.$set(item, 'selected', false);
					}
				})
				this.$set(list[index], 'selected', true);
				this.specSelected = [];
				list.forEach(item => {
					if (item.selected === true) {
						this.specSelected.push(item);
					}
				})
				this.id = id
			},
			
			//成功返回的图片地址
			result: function(e) {
				this.imageData = e.imgArr;
				this.urlUpload = this.imageData.toString();
			},
			
			//移除图片
			remove: function(e) {
				let index = e.index
			},
			
			//文本域输入的文案
			bindTextAreaBlur: function (e) {
				console.log(e.detail.value)
			},
			
			//视频上传
			chooseImage: function (e) {
				let _this = this
				
				_this.VideoOfImagesShow = true;
				_this.imagesShow = false;
				
				uni.chooseVideo({
					maxDuration:10,
					count: 1,
					success: (res) => {
						console.log(res)
						_this.src = res.tempFilePath;
						let filePath =  res.tempFilePath
						
						// VodUploader.start({
						//     // 必填，把 wx.chooseVideo 回调的参数(file)传进来
						//     mediaFile: filePath, 
						//     // 必填，获取签名的函数
						//     getSignature: this.sign, 
						//     // 选填，视频名称，强烈推荐填写(如果不填，则默认为“来自小程序”)
						//     mediaName: "1111", 
						//     // 选填，视频封面，把 wx.chooseImage 回调的参数(file)传进来
						//     coverFile: res.tempFile, 
						//     // 上传中回调，获取上传进度等信息
						//     progress: function(result) {
						//         console.log('progress');
						//         console.log(result);
						//     },
						//     // 上传完成回调，获取上传后的视频 URL 等信息
						//     finish: function(result) {
						//         console.log('finish');
						//         console.log(result);
						       
						//     },
						//     // 上传错误回调，处理异常
						//     error: function(result) {
						//         console.log('error');
						//         console.log(result);
						       
						//     },
						// });
						
						
						
						// uni.uploadFile({
						// 	url: _this.tui.interfaceUrl() + '/app/storage/upload',
						// 	formData: _this.formData,
						// 	filePath: filePath,
						// 	success: function(res) {
						// 		let resData = JSON.parse(res.data)
						// 		console.log(resData.data.url)
						// 		if(resData.errno == 0){
						// 			uni.hideLoading();
						// 			_this.urlUpload = resData.data.url;
						// 			console.log(_this.urlUpload);
						// 		}
								
						// 	},
						// 	fail: function(err) {
						// 		console.log(err)
						// 	}
						// })
						uni.showLoading({
						    title: '加载中',
							mask:true
						});
						 uni.uploadFile({
							url:_this.tui.interfaceUrl() + '/app/storage/upload',
							method:"POST",
							header:{
								'Authorization':'bearer '+ uni.getStorageSync('token')
							},
							filePath:filePath,
							name:'file',
							success: (res) => {   
								let resData = JSON.parse(res.data)
								console.log(resData.data)
								uni.hideLoading();
								_this.urlUpload = resData.data.url
								
							},
							fail: function(err) {
								console.log(err)
							}
						})
						
						
						
						
						
						
					}
				})
			},
			
			// 上传
			ConfirmUpload: function(){
				let _this = this;
				console.log(_this.urlUpload)
				if(_this.textarea){
					_this.tui.request('/app/material/addMaterial', 'POST',
					{
						userId: _this.userId,
						materialCategerId: _this.id,
						content: _this.textarea,
						hasVideo: _this.hasVideo,
						srcList: _this.urlUpload
					}, 
					false, false, false, )
						.then(res => {
							if(res.errno == 0){
								uni.reLaunch({
									url:"/pages/material/Material"
								})
								
							}else{
								console.log(res)
								_this.tui.toast(res.errmsg)
							}
						}).catch(err => {
							console.log(err)
						})
				}else{
					_this.tui.toast("请填写发布内容")
				}
			}
		}
	}
</script>

<style lang='scss' scoped>
	page {
		background: rgba(250, 250, 250, 1);
		padding-bottom: 106upx;
	}

	/* 类型  商品 */
	.attr_content {
		padding: 10upx 30upx;
		margin-bottom: 60upx;
		
		
		.attr-list {
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 30upx 0 0;
			margin-bottom: 20upx;

			text {
				margin-right: 10px;
				border-radius: 30upx;
				padding: 10upx 20upx;
				font-size: 32upx;
				color: #333333;
				border: 1px solid #E6E6E6;
			}

			.selected {
				color: #6E609E;
				border: 1px solid #6E609E;
			}
		}
	}
	
	.text_content{
		display: block;
		width: 90%;
		height: 340rpx;
		margin: 0 auto;
		background: #eeeeee;
		border: 1px solid #eeeeee;
		color: #808080;
		font-size: 14px;
		padding: 10upx;
	}
	
	.uploadMaterial{
		padding: 5px 15px;
		margin-top: 30upx;
		
		.uploadMaterialTop{
			display: flex;
			align-items: flex-end;
			font-size:32upx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(51,51,51,1);
			
		
			.uploadMaterialcheck{
				display: flex;
				align-items: center;
				font-size:28upx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(128,128,128,1);
				padding-left: 60upx;
				position: relative;
			}
			
			
			
		}
		
	}
	.uploadMaterialBottom{
		margin-top: 60upx;
		
		image{
			display: block;
			width: 100px;
			height: 100px;
			margin-top: 10px;
		}
	}
	.tui-box-upload {	
		box-sizing: border-box;
	}
	
	/* 按钮 */
	.loginbtn {
		width: 90%;
		height: 10px;
		margin: 0 auto;
		margin-top: 195upx;
	}
	
	.loginbtn button {
		margin-top: 20rpx;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 44rpx;
		outline: 0;
		display: block;
		margin: 0;
		font-family: inherit;
		background: #D14798;
	}
	.uploadMaterialquant{
		width: 12px;
		height: 12px;
		border: 2px solid #cccccc;
		border-radius: 50%;
		margin-right: 10px;
	}
	.uploadMaterialquan{
		width: 12px;
		height: 12px;
		border: 2px solid #6E609E;
		border-radius: 50%;
		margin-right: 10px;
	}
	.video{
		width: 200upx;
		height: 200upx;
	}
</style>
